import React from 'react';

import styles from './SearchPage.css';
import {message} from "antd";

const SearchPage = ({giftName,userPoint,username}) => {

  const state ={
    bgText:true
  };

  const showSpan = (giftName) =>{
      if(giftName!= ''){
        state.bgText = false;
        return <span> / {giftName}</span>
      }
      return '';
  }

  const showContent = (giftName) =>{
    if(giftName!= ''){
      return "积分兑换";
    }
    return '积分兑换区';
  }

  const showPoint =(userPoint,username)=>{
      if(username != ''){
        return (
          <span className={styles.search_coins}>
                <span className={styles.coins_text}>我有</span>
                <span className={styles.coins_num}>{userPoint}</span>
                <span className={styles.coins_text}>个积分</span>
              </span>
        );
      }else{
        return '';
      }
  }

  return (
    <div className={[styles.section,styles["section-subnav"]].join(' ')}>
      <div className={styles["section-subnav"]}>
        <p className={styles.subnav_title}>
          <a href="javascript:void(0)">{showContent(giftName)}</a>
          {showSpan(giftName)}
        </p>
        {/*<div className={state.bgText?styles.subnav_bgtext:[styles.subnav_bgtext,styles.display_none].join(' ')}></div>*/}

        <div className={styles.subnav_search}>
          <div>
            {showPoint(userPoint,username)}
            <div className={styles["mod-form-search"]}>
              <input type="text" className={styles.display_none}/>
              <input id="prize-search" className={styles["form-search_input"]} type="text" placeholder="搜索礼品"/>
              <input id="prize-search-btn" className={styles["form-search_submit"]} type="button" value=""/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default SearchPage
